<template>
	<view class="components-bggrad">
		
		
		<!-- 图片上传 -->
		
		<u-form-item label="上传照片"  left-icon="photo" borderBottom
			label-width="200">
		</u-form-item>
		
		<!-- :size-type="['compressed']" -->
		<view>
			<u-upload 
			ref="uUpload" 
			:max-size="5 * 1024 * 1024"
			:max-count="1"
			:action="action" 
			:auto-upload="false" >
			
			</u-upload>
		</view>
		
		
		<!-- 打开弹窗 -->
		<view style="width: 90%;margin: 40rpx auto;">
			
			<u-button @click="open" v-show="isLoadingShow === 0" :ripple='true'>上传信息</u-button>
			
			<button v-show="isLoadingShow === 1"
			class="cu-btn block bg-blue margin-tb-sm lg">
				<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
			</button>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				action: this.recognizeCatPhoto(),   // 图片上传地址
				
				isLoadingShow: 0
			}
		},
		onLoad() {
			
		},
		methods: {
			open(){
				//确认无误后，上传图片
				this.$refs.uUpload.upload()
				
				this.isLoadingShow = 1
				
				//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
				this.timer = setTimeout(() => {
				    // 获得图片路径
				    let files = [];
				    // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				    files = this.$refs.uUpload.lists.filter(val => {
				    	return val.progress == 100;
				    })
				    
				    console.log(files)
				}, 2000)
				
				// 如果识别成功
				if(files[0].response.code == 200){
					// 获取id，发送查询请求
					
					//回显猫咪信息+相似度
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.components-bggrad {
		margin: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		background: linear-gradient(45deg, #00F5D4, #01BEFF, #9A5CE5, #F15BB5);
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.container {
		width: 100%;
		position: absolute;
		text-align: center;
	}
	
</style>
